<template>
  <view>


    <view class="tn-flex shadow tn-padding  tn-bg-white tn-text-bold tn-flex-direction-row">
      <view class="tn-flex selector" @click="showDatePick=true">
        {{ dateValStr }} <span class="tn-icon-down-triangle  dm-main-text-color"/>
      </view>
      <view class="tn-margin-left selector" @click="showFromTypePick=true">{{ currentStatusStr }} <span class="tn-icon-down-triangle dm-main-text-color"/></view>
    </view>
    <tn-picker mode="time" v-model="showDatePick" :params="dataPickParams" @confirm="choseDate"/>
    <tn-picker mode="selector" v-model="showFromTypePick" :defaultSelector="[0]" :range="fromTypeSelector" rangeKey="name"  @confirm="choseFromTypeSelector"/>



    <view class="tn-flex tn-flex-row-center tn-text-xl tn-text-bold tn-margin">累计提现到账金额（元）:{{ vuex_user.invite_commission ||0 }}</view>

    <view class="dm-box tn-flex-col-center" v-for="(item,index) in list" :key="index">
      <view class="tn-flex tn-flex-row-between tn-text-sm tn-color-gray ">
        <view >提现单号：{{ item.out_trade_no }}</view>
      </view>
      <view class="tn-flex tn-flex-row-between tn-text-sm tn-color-gray tn-margin-top tn-flex-col-center">
        <view class="tn-text-md tn-color-black">提现金额(税前):<text class="money">￥{{ item.money }}</text></view>
        <view>税率:{{item.rate*100}}%</view>
        <view class="dm-color-wechat" v-if="item.status==1">已到账</view>
        <view class="dm-main-text-color" v-else-if="item.status==0">审核中</view>
        <view class="dm-main-text-color" v-else-if="item.status==2">不通过</view>
      </view>
      <view class="tn-flex tn-flex-row-between tn-text-xs  tn-color-gray tn-margin-top">
        <view>提现时间：{{ item.create_time*1000|formatDateTime }}</view>
        <view class="tn-color-black">提现方式：<text class="dm-color-wechat">微信零钱</text></view>
      </view>
    </view>


    <banner-ad :config="adConfig.wx_banner_withdraw"/>
  </view>

</template>

<script>
import common_mixin from '@/libs/mixin/common_mixin.js'
import BannerAd from "@/components/banner-ad/banner-ad.vue";

export default {
  components: {BannerAd},
  mixins: [common_mixin],
  name: "withdraw_detail",
  data() {
    return {
      showFromTypePick: false,
      fromTypeSelector:[
        {name:'全部',key:''},
        {name:'审核中',key:'0'},
        {name:'已到账',key:'1'},
        {name:'不通过',key:'2'},
      ],
      currentStatus:'',
      currentStatusStr:'全部',

      showDatePick: false,
      dateVal: '',
      dateValStr: '',
      // 只显示年月日
      dataPickParams: {
        year: true,
        month: true,
        day: false,
        hour: false,
        minute: false,
        second: false
      },

      page:1,
      list:[],
      hasMore:true,

    }
  },
  async onShow(){
    let date = new Date();
    this.dateVal = date.getFullYear() + "-" + (date.getMonth() + 1)
    this.dateValStr = date.getFullYear() + "-" + (date.getMonth() + 1)

    this.reset();
    await this.getList()
  },
  async onReachBottom() {
    if (!this.hasMore) {
      return
    }
    await this.getList()
  },
  methods:{
    reset() {
      this.page=1;
      this.hasMore = true;
      this.list=[];
    },
    async getList () {
      let params = {
        pageIndex:this.page,
        status:this.currentStatus,
        startTime: Date.parse(this.dateValStr+"-01 00:00:00"),
        endTime: Date.parse(this.dateValStr+"-30 23:59:59")
      }

      let resp = await this.$api.withdrawList(params)
      this.hasMore = resp.current_page<resp.total;
      this.list = this.list.concat(resp.data)
      this.page++;
    },
    choseDate(date) {
      this.dateVal = date.year + "-" + date.month
      this.dateValStr = date.year + "-" + date.month
      this.reset();
      this.getList();
    },
    choseFromTypeSelector(index) {
      this.currentStatus =this.fromTypeSelector[index].key
      this.currentStatusStr =this.fromTypeSelector[index].name
      this.reset();
      this.getList();
    }
  }
}
</script>

<style scoped lang="scss">

.selector {
  background-color: #F1F1F1;
  padding: 2px 10px;
}
</style>
